import React, { Component } from 'react';
import { WingBlank, WhiteSpace, Toast, Popover } from 'antd-mobile';
import CustomTop from 'common/containers/customTop.js';
import BookDesc from './sub/bookDesc.js';
import BookComment from './sub/bookComment.js';
import * as bookinfoApi from 'common/api/bookinfo.js';
import './bookDetail.less';

const Item = Popover.Item;
const tools = [
  (<Item key="0" className="tools" icon={<img src='assets/img/tools_collect.png'/>}><span>收藏</span></Item>),
  (<Item key="1" className="tools" icon={<img src='assets/img/tools_share.png'/>}><span>分享</span></Item>)
]

class BookDetail extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
	    	toolVisible: false,
	    	bookinfo: {
	    		title: '---',
	    		author: '---',
	    		cover: 'assets/img/nopic.png'
	    	},
	    	bookComments: []
	    }
	}
	
	//右上角点击事件
	toolHandle = (index) => {
		console.log(index)
	}
	
	componentDidMount(){
		var _this= this;
		Toast.loading();

		//获取书籍详情
		bookinfoApi.bookDetail({
			id: this.props.params.id
		}).then(detailResult => {
			//获取书籍评论
			bookinfoApi.bookComments({
				id: this.props.params.id
			}).then(commentsResult => {
				setTimeout(function(){
					Toast.hide();
					_this.setState({
						bookinfo: detailResult.data,
						bookComments: commentsResult.data.reviews
					})
				}, 500);
			})
		})
	}

	render(){
		const { bookinfo, bookComments } = this.state;
		
		return(
			<div className="container detail">
				<CustomTop 
					title={"图书详情"} 
					toolImg={"assets/img/tools.png"}
					tools={tools}
					toolHandle={this.toolHandle}>
				</CustomTop>
				<WingBlank>
					<BookDesc bookinfo={bookinfo}></BookDesc>
				</WingBlank>
				<WhiteSpace/>
				<WingBlank>
					<BookComment bookComments={bookComments}></BookComment>
				</WingBlank>
			</div>
		)
	}
}

export default BookDetail;